<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全部商品 - 面包工坊</title>
    <link rel="stylesheet" href="../assets/css/style.css">
    <link rel="stylesheet" href="../assets/css/products.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 头部导航 -->
        <header class="header">
            <div class="container">
                <div class="logo">
                    <a href="index.html">
                        <h1>面包工坊</h1>
                    </a>
                </div>
                <div class="search-box">
                    <input type="text" v-model="searchKeyword" placeholder="搜索商品...">
                    <button @click="searchProducts"><i class="fas fa-search"></i></button>
                </div>
                <nav class="nav">
                    <ul>
                        <li><a href="../index.html">首页</a></li>
                        <li><a href="products.html" class="active">全部商品</a></li>
                        <li class="cart-item">
                            <a href="cart.html">
                                <i class="fas fa-shopping-cart"></i> 
                                购物车
                                <span class="cart-count" v-if="cartCount > 0">{{cartCount}}</span>
                            </a>
                        </li>
                        <li class="user-menu">
                            <a href="#" id="userBtn">
                                <i class="fas fa-user"></i> 
                                <span class="user-text">{{isLoggedIn ? currentUser : '登录/注册'}}</span>
                            </a>
                            <div class="dropdown-menu">
                                <div class="guest-menu" v-if="!isLoggedIn">
                                    <a href="#" @click="showLoginModal"><i class="fas fa-sign-in-alt"></i> 登录</a>
                                    <a href="#" @click="showRegisterModal"><i class="fas fa-user-plus"></i> 注册</a>
                                </div>
                                <div class="user-menu-logged" v-else>
                                    <a href="user.html"><i class="fas fa-user-circle"></i> 个人中心</a>
                                    <a href="orders.html"><i class="fas fa-clipboard-list"></i> 我的订单</a>
                                    <a href="favorites.html"><i class="fas fa-heart"></i> 我的收藏</a>
                                    <div class="divider"></div>
                                    <a href="#" @click="logout"><i class="fas fa-sign-out-alt"></i> 退出登录</a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </nav>
            </div>
        </header>

        <main class="products-page">
            <div class="container">
                <!-- 面包屑导航 -->
                <div class="breadcrumb">
                    <a href="index.html">首页</a>
                    <i class="fas fa-angle-right"></i>
                    <span>全部商品</span>
                </div>



                <!-- 在分类栏上方添加快捷筛选标签 -->
                <div class="quick-filter">
                    <div class="filter-tags">
                        <button class="tag-btn active">全部</button>
                        <button class="tag-btn">特惠<span class="count">12</span></button>
                        <button class="tag-btn">新品<span class="count">25</span></button>
                        <button class="tag-btn">热卖<span class="count">18</span></button>
                        <button class="tag-btn">品牌优选</button>
                    </div>
                    <div class="selected-filters">
                        <span class="filter-label">已选：</span>
                        <div class="filter-tag">
                            价格：¥10-50
                            <i class="fas fa-times"></i>
                        </div>
                        <div class="filter-tag">
                            新品
                            <i class="fas fa-times"></i>
                        </div>
                    </div>
                </div>

                <div class="products-container">
                    <!-- 右侧商品展示区 -->
                    <div class="products-content full-width">
                        <!-- 排序工具栏 -->
                        <div class="toolbar">
                            <div class="sort-options">
                                <button :class="{ active: sortBy === 'default' }" 
                                        @click="sortProducts('default')">综合</button>
                                <button :class="{ active: sortBy === 'sales' }"
                                        @click="sortProducts('sales')">销量</button>
                                <button :class="{ active: sortBy === 'price' }"
                                        @click="sortProducts('price')">
                                    价格
                                    <i class="fas" :class="priceOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down'"></i>
                                </button>
                            </div>
                        </div>

                        <!-- 商品网格 -->
                        <div class="products-grid">
                            <div v-for="(product, index) in products.slice(0, 10)" 
                                 :key="index" 
                                 class="product-card">
                                <div class="product-img">
                                    <img :src="product.image" :alt="product.name" v-if="product.image">
                                    <div class="placeholder-img" v-else></div>
                                </div>
                                <div class="product-info">
                                    <h3 class="product-name">{{product.name}}</h3>
                                    <div class="price-row">
                                        <div class="price-info">
                                            <span class="current-price">¥{{product.price}}</span>
                                            <span class="original-price" v-if="product.originalPrice">¥{{product.originalPrice}}</span>
                                        </div>
                                        <div class="sales-info">
                                            <span class="sales">月销{{product.sales}}+</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 分页器 -->
                        <div class="pagination">
                            <button :disabled="currentPage === 1" 
                                    @click="currentPage--">上一页</button>
                            <button v-for="page in totalPages" 
                                    :key="page"
                                    :class="{ active: currentPage === page }"
                                    @click="currentPage = page">
                                {{page}}
                            </button>
                            <button :disabled="currentPage === totalPages" 
                                    @click="currentPage++">下一页</button>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- 复用footer部分 -->
        <footer class="footer">
            <!-- ... footer内容与index.html相同 ... -->
        </footer>
    </div>

    
    <script>
        new Vue({
            el: '#app',
            data: {
                products: [
                    {
                        id: 1,
                        name: '法式长棍面包',
                        price: 12.9,
                        sales: 2000
                    },
                    {
                        id: 2,
                        name: '全麦面包',
                        price: 15.8,
                        sales: 1500
                    },
                    {
                        id: 3,
                        name: '牛角可颂',
                        price: 8.5,
                        sales: 3000
                    },
                    {
                        id: 4,
                        name: '吐司面包',
                        price: 10.0,
                        sales: 2500
                    },
                    {
                        id: 5,
                        name: '蓝莓贝果',
                        price: 9.9,
                        sales: 1800
                    },
                    {
                        id: 6,
                        name: '巧克力面包',
                        price: 13.5,
                        sales: 2200
                    },
                    {
                        id: 7,
                        name: '核桃面包',
                        price: 11.8,
                        sales: 1600
                    },
                    {
                        id: 8,
                        name: '葡萄干面包',
                        price: 10.5,
                        sales: 1900
                    },
                    {
                        id: 9,
                        name: '肉松面包',
                        price: 7.5,
                        sales: 2800
                    },
                    {
                        id: 10,
                        name: '奶油面包',
                        price: 6.8,
                        sales: 2100
                    }
                ],
                viewMode: 'grid',
                sortBy: 'default',
                priceOrder: 'asc',
                currentPage: 1,
                pageSize: 20,
                priceRange: {
                    min: '',
                    max: ''
                },
                filters: {
                    new: false,
                    promotion: false,
                    inStock: false
                },
                searchKeyword: '',
                cartCount: 0,
                isLoggedIn: false,
                currentUser: null,
                showLogin: false,
                showRegister: false
            },
            computed: {
                filteredProducts() {
                    let result = [...this.products];
                    
                    // 价格筛选
                    if (this.priceRange.min !== '') {
                        result = result.filter(p => p.price >= this.priceRange.min);
                    }
                    if (this.priceRange.max !== '') {
                        result = result.filter(p => p.price <= this.priceRange.max);
                    }

                    // 属性筛选
                    if (this.filters.new) {
                        result = result.filter(p => p.isNew);
                    }
                    if (this.filters.promotion) {
                        result = result.filter(p => p.isPromotion);
                    }
                    if (this.filters.inStock) {
                        result = result.filter(p => p.stock > 0);
                    }

                    // 排序
                    switch(this.sortBy) {
                        case 'sales':
                            result.sort((a, b) => b.sales - a.sales);
                            break;
                        case 'price':
                            result.sort((a, b) => {
                                return this.priceOrder === 'asc' ? 
                                    a.price - b.price : 
                                    b.price - a.price;
                            });
                            break;
                    }

                    return result;
                },
                totalPages() {
                    return Math.ceil(this.filteredProducts.length / this.pageSize);
                }
            },
            methods: {
                sortProducts(type) {
                    if (type === 'price' && this.sortBy === 'price') {
                        this.priceOrder = this.priceOrder === 'asc' ? 'desc' : 'asc';
                    }
                    this.sortBy = type;
                },
                filterByPrice() {
                    // 价格筛选逻辑
                },
                addToCart(product) {
                    // 添加到购物车
                },
                toggleFavorite(product) {
                    // 收藏/取消收藏
                },
                searchProducts() {
                    // 搜索商品逻辑
                    console.log('搜索:', this.searchKeyword);
                },
                showLoginModal() {
                    this.showLogin = true;
                    this.showRegister = false;
                },
                showRegisterModal() {
                    this.showRegister = true;
                    this.showLogin = false;
                },
                logout() {
                    this.isLoggedIn = false;
                    this.currentUser = null;
                    localStorage.removeItem('currentUser');
                    // 可以添加退出后的跳转
                    // window.location.href = 'index.html';
                }
            },
            mounted() {
                // 模拟获取商品数据
                // 实际项目中应该通过API获取
                this.products = [
                    {
                        id: 1,
                        name: '法式长棍面包',
                        price: 12.9,
                        originalPrice: 15.9,
                        sales: 2000,
                        image: '../assets/img/product/product1.png',
                        shopName: '面包工坊官方店',
                        shopLogo: '../assets/img/product/product1.png',
                        isNew: true,
                        isPromotion: true,
                        stock: 100,
                        badges: [
                            { type: 'new', text: '新品' },
                            { type: 'discount', text: '-20%' }
                        ]
                    },
                    {
                        id: 2,
                        name: '法式长棍面包',
                        price: 12.9,
                        originalPrice: 15.9,
                        sales: 2000,
                        image: '../assets/img/products/bread1.jpg',
                        shopName: '面包工坊官方店',
                        shopLogo: '../assets/img/logo.png',
                        isNew: true,
                        isPromotion: true,
                        stock: 100,
                        badges: [
                            { type: 'new', text: '新品' },
                            { type: 'discount', text: '-20%' }
                        ]
                    },
                    {
                        id:3,
                        name: '法式长棍面包',
                        price: 12.9,
                        originalPrice: 15.9,
                        sales: 2000,
                        image: '../assets/img/products/bread1.jpg',
                        shopName: '面包工坊官方店',
                        shopLogo: '../assets/img/logo.png',
                        isNew: true,
                        isPromotion: true,
                        stock: 100,
                        badges: [
                            { type: 'new', text: '新品' },
                            { type: 'discount', text: '-20%' }
                        ]
                    },
                    {
                        id: 1,
                        name: '法式长棍面包',
                        price: 12.9,
                        originalPrice: 15.9,
                        sales: 2000,
                        image: '../assets/img/products/bread1.jpg',
                        shopName: '面包工坊官方店',
                        shopLogo: '../assets/img/logo.png',
                        isNew: true,
                        isPromotion: true,
                        stock: 100,
                        badges: [
                            { type: 'new', text: '新品' },
                            { type: 'discount', text: '-20%' }
                        ]
                    },
                    {
                        id: 1,
                        name: '法式长棍面包',
                        price: 12.9,
                        originalPrice: 15.9,
                        sales: 2000,
                        image: '../assets/img/products/bread1.jpg',
                        shopName: '面包工坊官方店',
                        shopLogo: '../assets/img/logo.png',
                        isNew: true,
                        isPromotion: true,
                        stock: 100,
                        badges: [
                            { type: 'new', text: '新品' },
                            { type: 'discount', text: '-20%' }
                        ]
                    },
                    {
                        id: 1,
                        name: '法式长棍面包',
                        price: 12.9,
                        originalPrice: 15.9,
                        sales: 2000,
                        image: '../assets/img/products/bread1.jpg',
                        shopName: '面包工坊官方店',
                        shopLogo: '../assets/img/logo.png',
                        isNew: true,
                        isPromotion: true,
                        stock: 100,
                        badges: [
                            { type: 'new', text: '新品' },
                            { type: 'discount', text: '-20%' }
                        ]
                    },
                    {
                        id: 1,
                        name: '法式长棍面包',
                        price: 12.9,
                        originalPrice: 15.9,
                        sales: 2000,
                        image: '../assets/img/products/bread1.jpg',
                        shopName: '面包工坊官方店',
                        shopLogo: '../assets/img/logo.png',
                        isNew: true,
                        isPromotion: true,
                        stock: 100,
                        badges: [
                            { type: 'new', text: '新品' },
                            { type: 'discount', text: '-20%' }
                        ]
                    },
                    {
                        id: 1,
                        name: '法式长棍面包',
                        price: 12.9,
                        originalPrice: 15.9,
                        sales: 2000,
                        image: '../assets/img/products/bread1.jpg',
                        shopName: '面包工坊官方店',
                        shopLogo: '../assets/img/logo.png',
                        isNew: true,
                        isPromotion: true,
                        stock: 100,
                        badges: [
                            { type: 'new', text: '新品' },
                            { type: 'discount', text: '-20%' }
                        ]
                    },
                    {
                        id: 1,
                        name: '法式长棍面包',
                        price: 12.9,
                        originalPrice: 15.9,
                        sales: 2000,
                        image: '../assets/img/products/bread1.jpg',
                        shopName: '面包工坊官方店',
                        shopLogo: '../assets/img/logo.png',
                        isNew: true,
                        isPromotion: true,
                        stock: 100,
                        badges: [
                            { type: 'new', text: '新品' },
                            { type: 'discount', text: '-20%' }
                        ]
                    },
                    {
                        id: 1,
                        name: '法式长棍面包',
                        price: 12.9,
                        originalPrice: 15.9,
                        sales: 2000,
                        image: '../assets/img/products/bread1.jpg',
                        shopName: '面包工坊官方店',
                        shopLogo: '../assets/img/logo.png',
                        isNew: true,
                        isPromotion: true,
                        stock: 100,
                        badges: [
                            { type: 'new', text: '新品' },
                            { type: 'discount', text: '-20%' }
                        ]
                    },
                    {
                        id: 1,
                        name: '法式长棍面包',
                        price: 12.9,
                        originalPrice: 15.9,
                        sales: 2000,
                        image: '../assets/img/products/bread1.jpg',
                        shopName: '面包工坊官方店',
                        shopLogo: '../assets/img/logo.png',
                        isNew: true,
                        isPromotion: true,
                        stock: 100,
                        badges: [
                            { type: 'new', text: '新品' },
                            { type: 'discount', text: '-20%' }
                        ]
                    },
                    {
                        id: 1,
                        name: '法式长棍面包',
                        price: 12.9,
                        originalPrice: 15.9,
                        sales: 2000,
                        image: '../assets/img/products/bread1.jpg',
                        shopName: '面包工坊官方店',
                        shopLogo: '../assets/img/logo.png',
                        isNew: true,
                        isPromotion: true,
                        stock: 100,
                        badges: [
                            { type: 'new', text: '新品' },
                            { type: 'discount', text: '-20%' }
                        ]
                    }
                    // ... 更多商品数据
                ];

                // 检查登录状态
                const savedUser = localStorage.getItem('currentUser');
                if (savedUser) {
                    this.isLoggedIn = true;
                    this.currentUser = savedUser;
                }

                // 获取购物车数量
                const cart = JSON.parse(localStorage.getItem('cart')) || [];
                this.cartCount = cart.reduce((sum, item) => sum + item.quantity, 0);
            }
        });
    </script>
</body>
</html> 